<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
  >
    <g mask="url(#mask-IQGVp9i7f3mNjf2yuwJGX)">
      <path
        d="M13.6799 4.31994C13.2499 2.56008 10.7501 2.56008 10.3201 4.31994C10.0501 5.44998 8.74992 5.98998 7.75002 5.37996C6.20994 4.44 4.44 6.20994 5.37996 7.75002C5.52 7.98006 5.61 8.25006 5.62998 8.52006C5.64996 8.79006 5.61 9.06006 5.50002 9.31008C5.39994 9.55992 5.23992 9.78006 5.03004 9.96006C4.83006 10.1401 4.58004 10.2599 4.31994 10.3201C2.56008 10.7501 2.56008 13.2499 4.31994 13.6799C4.58004 13.7401 4.83006 13.8599 5.03004 14.0399C5.23992 14.2199 5.39994 14.4401 5.50002 14.6899C5.61 14.9399 5.64996 15.2099 5.62998 15.4799C5.61 15.7499 5.52 16.0199 5.37996 16.25C4.44 17.7901 6.20994 19.56 7.75002 18.62C7.98006 18.48 8.25006 18.39 8.52006 18.37C8.79006 18.35 9.06006 18.39 9.31008 18.5C9.55992 18.6001 9.78006 18.7601 9.96006 18.97C10.1401 19.1699 10.2599 19.42 10.3201 19.6801C10.7501 21.4399 13.2499 21.4399 13.6799 19.6801C13.7401 19.42 13.8599 19.1699 14.0399 18.97C14.2199 18.7601 14.4401 18.6001 14.6899 18.5C14.9399 18.39 15.2099 18.35 15.4799 18.37C15.7499 18.39 16.0199 18.48 16.25 18.62C17.7901 19.56 19.56 17.7901 18.62 16.25C18.48 16.0199 18.39 15.7499 18.37 15.4799C18.35 15.2099 18.39 14.9399 18.5 14.6899C18.6001 14.4401 18.7601 14.2199 18.97 14.0399C19.1699 13.8599 19.42 13.7401 19.6801 13.6799C21.4399 13.2499 21.4399 10.7501 19.6801 10.3201C19.42 10.2599 19.1699 10.1401 18.97 9.96006C18.7601 9.78006 18.6001 9.55992 18.5 9.31008C18.39 9.06006 18.35 8.79006 18.37 8.52006C18.39 8.25006 18.48 7.98006 18.62 7.75002C19.56 6.20994 17.7901 4.44 16.25 5.37996C16.0199 5.52 15.7499 5.61 15.4799 5.62998C15.2099 5.64996 14.9399 5.61 14.6899 5.50002C14.4401 5.39994 14.2199 5.23992 14.0399 5.03004C13.8599 4.83006 13.7401 4.58004 13.6799 4.31994Z"
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
      ></path>
      <path
        d="M9 12C9 13.66 10.34 15 12 15C13.66 15 15 13.66 15 12C15 10.34 13.66 9 12 9C10.34 9 9 10.34 9 12Z"
        :stroke="active ? activeColor : inactiveColor"
        :style="style"
        stroke-width="1.5"
        stroke-linejoin="round"
      ></path>
    </g>
    <defs>
      <mask id="mask-IQGVp9i7f3mNjf2yuwJGX" style="mask-type: alpha" maskUnits="userSpaceOnUse">
        <path d="M0 24L24 24L24 0L0 0L0 24Z" fill="#000000"></path>
      </mask>
    </defs>
  </svg>
</template>

<script>
  import config from './config' // 导入配置文件
  const { transionDuration, activeColor, inactiveColor } = config

  export default {
    name: 'operation-data-svg',
    props: {
      active: { default: false },
      transiton: {
        type: Number,
        default: transionDuration,
      },

      activeColor: {
        type: String,
        default: activeColor,
      },
      inactiveColor: {
        type: String,
        default: inactiveColor,
      },
    },
    computed: {
      style() {
        return { transition: `stroke ${this.transiton}s ease` }
      },
    },
  }
</script>

<style lang="scss" scoped></style>
